<script setup lang="ts">
import {useRoute} from "vue-router";
import {onMounted, ref, watchEffect} from "vue";
import {showFailToast, showSuccessToast, showToast} from "vant";
import myAxios from "../plugins/myAxios.ts"
import UserCardList from "../components/UserCardList.vue";

const route = useRoute();
const isMatchMode = ref<boolean>(false)

const loading = ref<boolean>(true)

/**
 * 加载数据
 */
const loadData = async () => {
  let userListData = [];
  // 心动模式，根据标签匹配用户
  loading.value = true;
  if (isMatchMode.value) {
    userListData = await myAxios.get('/user/match', {
      params: {
        num: 10
      },
    })
        .then(function (response) {
          console.log('/user/match succeed', response);
          return response?.data;
        })
        .catch(function (error) {
          console.log('/user/match error', error);
          showFailToast('请求失败');
        })

  } else {
    // 心动模式，直接匹配用户
    userListData = await myAxios.get('/user/recommend', {
      params: {
        pageSize: 8,
        pageNum: 1
      },
    })
        .then(function (response) {
          console.log('/user/recommend succeed', response);
          return response?.data?.records;
        })
        .catch(function (error) {
          console.log('/user/recommend error', error);
          showFailToast('请求失败');
        })
  }
  if (userListData) {
    userListData.forEach(user => {
      if (user.tags) {
        user.tags = JSON.parse(user.tags)
      }
    })
    userList.value = userListData;
    loading.value = false;
  }
}

watchEffect(() => {
  loadData()
})

const userList = ref([])

// const loading = ref(false);
const onRefresh = () => {
  setTimeout(() => {
    showToast('刷新成功');
    loading.value = false;
    count.value++;
  }, 1000);
};
</script>

<template>
  <van-cell center title="心动模式">
    <template #right-icon>
      <van-switch v-model="isMatchMode"/>
    </template>
  </van-cell>
  <van-pull-refresh v-model="loading" @refresh="onRefresh">
    <user-card-list :user-list="userList" :loading="loading"/>
  </van-pull-refresh>
  <van-empty v-if="userList.length < 1" description="数据为空"/>
</template>

<style scoped>

</style>
